<template>
  <div class="order-view">
    <el-button type="text" @click="dialogVisible = true"><span
        :style="{color: data.status === 0 ? '#0090ff' : 'black' }">{{
          data.title
        }}</span></el-button>
    <el-dialog title="消息通知 - 详情" :visible.sync="dialogVisible" width="80%" :before-close="handleClose"
      :modal-append-to-body="false" :append-to-body="true">
      <el-descriptions>
        <el-descriptions-item label="标题">{{
          data.title
        }}</el-descriptions-item>
        <el-descriptions-item label="通知日期">{{
          data.createStr
        }}</el-descriptions-item>
        <el-descriptions-item label="消息类型">{{
          data.typeName
        }}</el-descriptions-item>
        <el-descriptions-item label="内容">{{
          data.content
        }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{
          data.status === 0 ? "未读" : "已读"
        }}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"@click="updMsgStatus()" v-if="data.status === 0">{{data.type === 1? "已读":"已处理"}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  props: ["data"],
  name: "MsgView",
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    updMsgStatus(){
  
      this.$http.post("http://localhost:8081/finerMsg/updMsgStatus", {
        id: this.data.id,
      }).then((res) => {
        if (res.data.code === "200") {
          this.dialogVisible = false;
          this.$emit("click-updList");
          this.$emit("click-updCount");
          
        }
       
      })
    }
  },
};
</script>